<template>
  <view>
    <view >
      <view>
        <scroll-view scroll-x class="result-header-nav">
          <view
            class="cu-item"
            :class="index == TabCur ? 'active-color' : ''"
            v-for="(item, index) in navData"
            :key="index"
            @tap="tabSelect"
            :data-id="index"
          >
            {{ item }}
          </view>
        </scroll-view>
        <view class="card-box" >
          <view style="background-color: #3745eb; padding-bottom:10px">
            <view 
              class="card-box-1"
              style="height: 120px; width: 100%;"
            >
              <view class="card-box-1">
                <text v-if="TabCur == 0" >每月应还</text>
                <text v-else >首月月供</text>
                <view class="text-sl title-money">
                  <text>{{ yuegong.toFixed(2) }}</text>
                  <text class="text-sm">元</text>
                </view>
                <view v-if="TabCur == 1"
                  >每月约递减{{ yuegongdijian.toFixed(2) }}元</view
                >
              </view>
            </view>
            <view
              class="card-bottom"
              style="height: 30px; width: 100%; background-color: #3745eb;"
            >
              <view class="card-bottom-item " style="width: 33%">
                <view class="text-center">
                  <view class="text-sm" style="color: #dddddd">贷款总额</view>
                  <view class="">{{ totalMoney }}万</view>
                </view>
              </view>
              <view class="flex lixi-total">
                <view class="text-center">
                  <view class="text-sm" style="color: #dddddd">利息总额</view>
                  <view class="">{{ totalLixi.toFixed(2) }}万</view>
                </view>
              </view>
              <view class="flex justify-center align-center" style="width: 33%">
                <view class="text-center">
                  <view class="text-sm" style="color: #dddddd">贷款年限</view>
                  <view class="">{{ year }}年</view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="margin-top text-box-1 ">
          <view class="" style="margin-top: 10px; margin-bottom: 10px; width: 85%">
            <view v-if="TabCur == 0">
              <text class="text-bold active-color">每月还款金额不变</text>
              <text
                >其中还款的本金逐月递减，利息逐月递减。计算结果仅供参考。</text
              >
            </view>
            <view v-else>
              <text class="text-bold active-color"
                >每月还款金额递减{{ yuegongdijian.toFixed(2) }}元</text
              >
              <text
                >其中每月还款的本金不变，利息逐月减少。计算结果仅供参考。</text
              >
            </view>
          </view>
        </view>

        <view v-if="!showZh" class="flex-justify-center-align-center">
          <view style="width: 85%">
            <view class="flex-justify-between margin-top table-head">
              <view class="text-center" style="width: 15%">期数</view>
              <view class="text-center" style="width: 20%">月供金额</view>
              <view class="text-center" style="width: 20%">月供本金</view>
              <view class="text-center" style="width: 20%">月供利息</view>
              <view class="text-center" style="width: 25%">剩余本息</view>
            </view>
          </view>
        </view>
        <view v-else class="flex-justify-center-align-center">
          <view style="width: 85%">
            <view class="flex-justify-between margin-top table-head">
              <view class="text-center" style="width: 15%">期数</view>
              <view class="text-center" style="width: 25%">总还款金额</view>
              <view class="text-center" style="width: 25%">商贷还款</view>
              <view class="text-center" style="width: 25%">公积金还款</view>
            </view>
          </view>
        </view>
      </view>

      <view
        v-if="!showZh"
        class="flex-justify-center-align-center"
        style="margin-top: 20px; width: 100%"
      >
        <view style="width: 85%">
          <view style="margin-bottom: 10px">
            <view
              class="flex-justify-between table-head-content"
              v-for="(item, index) in mouthdataArray"
              :key="index"
            >
              <view class="text-center" style="width: 15%">{{
                item.topNum
              }}</view>
              <view class="text-center" style="width: 20%">{{
                item.yueToatl.toFixed(2)
              }}</view>
              <view class="text-center" style="width: 20%">{{
                item.yuebenjin.toFixed(2)
              }}</view>
              <view class="text-center" style="width: 20%">{{
                item.yuelixi.toFixed(2)
              }}</view>
              <view class="text-center" style="width: 25%">{{
                item.leftFund.toFixed(2)
              }}</view>
            </view>
          </view>
        </view>
      </view>

      <view
        v-else
        class="flex-justify-center align-center"
        style="margin-top: 20px; width: 100%"
      >
        <view style="width: 85%">
          <view style="margin-bottom: 10px">
            <view
              class="flex-justify-between table-head-content"
              v-for="(item, index) in zuheMouthdataArray"
              :key="index"
            >
              <view class="text-center" style="width: 15%">{{
                item.topNum
              }}</view>
              <view class="text-center" style="width: 25%">{{
                turnString(
                  parseFloat(item.sdyuegong.toFixed(2)) +
                    parseFloat(item.gjjyuegong.toFixed(2))
                )
              }}</view>
              <view class="text-center" style="width: 25%">{{
                item.sdyuegong.toFixed(2)
              }}</view>
              <view class="text-center" style="width: 25%">{{
                item.gjjyuegong.toFixed(2)
              }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      TabCur: 0,
      navData: ["等额本息", "等额本金"],
      mouthdataArray: [],
      yuegong: 0, //每月月供
      totalMoney: 0, //贷款本金
      totalLixi: 0, //总利息
      year: 0, //贷款年限
      yuegongdijian: 0, //每月递减金额
      optionData: {},
      titles: "",
      showZh: false,
      zuheMouthdataArray: [], //组合贷款
    };
  },
  onLoad(option) {
    uni.setNavigationBarTitle({
      title: option.title,
    });
    this.titles = option.title;
    if (option.title == "组合贷款") {
      this.optionData = JSON.parse(option.datas);
      let data = this.optionData;
      this.totalMoney = parseFloat(data.gjjmoney) + parseFloat(data.sdmoney);

      if (data.gjjyear < data.sdyear) {
        this.year = data.sdyear;
      } else {
        this.year = data.gjjyear;
      }
      this.showZh = true;
      this.zuhe(
        1,
        data.sdmoney,
        data.gjjmoney,
        data.sdyear,
        data.gjjyear,
        data.sdlilv,
        data.gjjlilv
      );
    } else {
      this.optionData = JSON.parse(option.datas);
      let data = this.optionData;
      this.totalMoney = data.money;
      this.year = data.year;
      this.benxi(data.money, data.year, data.lilv);
    }
  },
  methods: {
    turnString(num) {
      return num.toFixed(2);
    },
    tabSelect(e) {
      this.TabCur = e.currentTarget.dataset.id;
      let data = this.optionData;
      if (this.titles == "组合贷款") {
        if (this.TabCur == 0) {
          this.zuhe(
            1,
            data.sdmoney,
            data.gjjmoney,
            data.sdyear,
            data.gjjyear,
            data.sdlilv,
            data.gjjlilv
          );
        } else {
          this.zuhe(
            2,
            data.sdmoney,
            data.gjjmoney,
            data.sdyear,
            data.gjjyear,
            data.sdlilv,
            data.gjjlilv
          );
        }
      } else {
        if (this.TabCur == 0) {
          this.benxi(data.money, data.year, data.lilv);
        } else {
          this.benjin(data.money, data.year, data.lilv);
        }
      }
    },
    //等额本息计算
    benxi(num, year, lilv) {
      //每月月供额=〔贷款本金×月利率×(1＋月利率)＾还款月数〕÷〔(1＋月利率)＾还款月数-1〕
      var mouth = parseInt(year) * 12,
        mouthlilv = parseFloat(lilv) / 12,
        dknum = parseFloat(num) * 10000;

      //每月月供
      var yuegong =
        (dknum * mouthlilv * Math.pow(1 + mouthlilv, mouth)) /
        (Math.pow(1 + mouthlilv, mouth) - 1);
      this.yuegong = yuegong;
      //总利息=还款月数×每月月供额-贷款本金
      var totalLixi = mouth * yuegong - dknum;
      this.totalLixi = totalLixi / 10000;
      //还款总额 总利息+贷款本金
      var totalPrice = totalLixi + dknum,
        leftFund = totalLixi + dknum;

      //循环月份
      var mouthdataArray = [],
        nowmouth = new Date().getMonth(),
        realmonth = 0;

      for (var i = 1; i <= mouth; i++) {
        realmonth = nowmouth + i;
        var yearlist = Math.floor(i / 12);

        realmonth = realmonth - 12 * yearlist;

        if (realmonth > 12) {
          realmonth = realmonth - 12;
        }
        //console.log(realmonth)
        //每月应还利息=贷款本金×月利率×〔(1+月利率)^还款月数-(1+月利率)^(还款月序号-1)〕÷〔(1+月利率)^还款月数-1〕
        var yuelixi =
          (dknum *
            mouthlilv *
            (Math.pow(1 + mouthlilv, mouth) - Math.pow(1 + mouthlilv, i - 1))) /
          (Math.pow(1 + mouthlilv, mouth) - 1);
        //每月应还本金=贷款本金×月利率×(1+月利率)^(还款月序号-1)÷〔(1+月利率)^还款月数-1〕
        var yuebenjin =
          (dknum * mouthlilv * Math.pow(1 + mouthlilv, i - 1)) /
          (Math.pow(1 + mouthlilv, mouth) - 1);
        leftFund = leftFund - (yuelixi + yuebenjin);
        if (leftFund < 0) {
          leftFund = 0;
        }
        mouthdataArray[i - 1] = {
          monthName: realmonth + "月",
          yuelixi: yuelixi,
          yuebenjin: yuebenjin,
          //剩余还款
          leftFund: leftFund,
          yueToatl: yuelixi + yuebenjin,
          topNum: i,
          totalLixi: totalLixi,
        };
      }
      return (this.mouthdataArray = mouthdataArray);
    },
    //等额本金计算
    benjin(num, year, lilv) {
      var mouth = parseInt(year) * 12,
        mouthlilv = parseFloat(lilv) / 12,
        dknum = parseFloat(num) * 10000,
        yhbenjin = 0; //首月还款已还本金金额是0
      //每月应还本金=贷款本金÷还款月数
      var everymonthyh = dknum / mouth;
      //每月月供额=(贷款本金÷还款月数)+(贷款本金-已归还本金累计额)×月利率
      var yuegong = everymonthyh + (dknum - yhbenjin) * mouthlilv;

      this.yuegong = yuegong;
      //每月月供递减额=每月应还本金×月利率=贷款本金÷还款月数×月利率
      var yuegongdijian = everymonthyh * mouthlilv;
      this.yuegongdijian = yuegongdijian;
      //总利息=〔(总贷款额÷还款月数+总贷款额×月利率)+总贷款额÷还款月数×(1+月利率)〕÷2×还款月数-总贷款额
      var totalLixi =
        ((everymonthyh +
          dknum * mouthlilv +
          (dknum / mouth) * (1 + mouthlilv)) /
          2) *
          mouth -
        dknum;
      this.totalLixi = totalLixi / 10000;
      //还款总额 总利息+贷款本金
      var totalPrice = totalLixi + dknum,
        leftFund = totalLixi + dknum;

      //循环月份
      var mouthdataArray = [],
        nowmouth = new Date().getMonth(),
        realmonth = 0;

      for (var i = 1; i <= mouth; i++) {
        realmonth = nowmouth + i;
        var yearlist = Math.floor(i / 12);

        realmonth = realmonth - 12 * yearlist;

        if (realmonth > 12) {
          realmonth = realmonth - 12;
        }
        yhbenjin = everymonthyh * (i - 1);
        var yuebenjin = everymonthyh + (dknum - yhbenjin) * mouthlilv;
        //每月应还利息=剩余本金×月利率=(贷款本金-已归还本金累计额)×月利率
        var yuelixi = (dknum - yhbenjin) * mouthlilv;
        leftFund = leftFund - yuebenjin;
        if (leftFund < 0) {
          leftFund = 0;
        }
        mouthdataArray[i - 1] = {
          monthName: realmonth + "月",
          yuelixi: yuelixi,
          //每月本金
          yuebenjin: everymonthyh,
          //剩余还款
          leftFund: leftFund,
          //每月还款总额
          yueToatl: yuelixi + everymonthyh,
          topNum: i,
          totalLixi: totalLixi,
        };
      }
      return (this.mouthdataArray = mouthdataArray);
    },
    //商贷-公积金贷款统一函数
    singleDk(type, num, year, lilv) {
      var _this = this;
      // type:1等额本息 2等额本金，num 贷款金额 year贷款年限，lilv：贷款基准利率
      if (type == 1) {
        return _this.benxi(num, year, lilv);
      } else if (type == 2) {
        return _this.benjin(num, year, lilv);
      }
    },
    //组合贷款计算 type 1等额本息 2等额本金  sdnum商贷金额  gjjnum公积金金额  sdyear商贷年限  gjjyear公积金年限  sdlilv商贷利率 gjjlilv公积金利率
    zuhe(type, sdnum, gjjnum, sdyear, gjjyear, sdlilv, gjjlilv) {
      var _this = this,
        year = sdyear > gjjyear ? sdyear : gjjyear;
      if (type == 1) {
        var sdObj = _this.benxi(sdnum, sdyear, sdlilv);
        var gjjObj = _this.benxi(gjjnum, gjjyear, gjjlilv);

        this.totalLixi = (sdObj[0].totalLixi + gjjObj[0].totalLixi) / 10000;
        if (sdObj.length > gjjObj.length) {
          var mergemouthdataArray = sdObj.map(function (item, index) {
            if (index < gjjObj.length) {
              return {
                monthName: item.monthName,
                yuelixi: item.yuelixi + gjjObj[index].yuelixi,
                yuebenjin: item.yuebenjin + gjjObj[index].yuebenjin,
                leftFund: item.leftFund + gjjObj[index].leftFund,
                topNum: item.topNum,
                sdyuegong: item.yuelixi + item.yuebenjin,
                gjjyuegong: gjjObj[index].yuelixi + gjjObj[index].yuebenjin,
              };
            } else {
              return {
                monthName: item.monthName,
                yuelixi: item.yuelixi,
                yuebenjin: item.yuebenjin,
                leftFund: item.leftFund,
                topNum: item.topNum,
                sdyuegong: item.yuelixi + item.yuebenjin,
                gjjyuegong: 0,
              };
            }
          });
        } else {
          var mergemouthdataArray = gjjObj.map(function (item, index) {
            if (index < sdObj.length) {
              return {
                monthName: item.monthName,
                yuelixi: item.yuelixi + sdObj[index].yuelixi,
                yuebenjin: item.yuebenjin + sdObj[index].yuebenjin,
                leftFund: item.leftFund + sdObj[index].leftFund,
                topNum: item.topNum,
                sdyuegong: sdObj[index].yuelixi + sdObj[index].yuebenjin,
                gjjyuegong: item.yuelixi + item.yuebenjin,
              };
            } else {
              return {
                monthName: item.monthName,
                yuelixi: item.yuelixi,
                yuebenjin: item.yuebenjin,
                leftFund: item.leftFund,
                topNum: item.topNum,
                sdyuegong: 0,
                gjjyuegong: item.yuelixi + item.yuebenjin,
              };
            }
          });
        }

        this.zuheMouthdataArray = mergemouthdataArray;
        this.yuegong =
          this.zuheMouthdataArray[0].sdyuegong +
          this.zuheMouthdataArray[0].gjjyuegong;
        return this.zuheMouthdataArray;
      } else if (type == 2) {
        var sdObj = _this.benjin(sdnum, sdyear, sdlilv);
        var gjjObj = _this.benjin(gjjnum, gjjyear, gjjlilv);

        this.totalLixi = (sdObj[0].totalLixi + gjjObj[0].totalLixi) / 10000;

        if (sdObj.length > gjjObj.length) {
          var mergemouthdataArray = sdObj.map(function (item, index) {
            if (index < gjjObj.length) {
              return {
                monthName: item.monthName,
                yuelixi: item.yuelixi + gjjObj[index].yuelixi,
                yuebenjin: item.yuebenjin + gjjObj[index].yuebenjin,
                leftFund: item.leftFund + gjjObj[index].leftFund,
                topNum: item.topNum,
                gjjyuegong: gjjObj[index].yuelixi + gjjObj[index].yuebenjin,
                sdyuegong: item.yuelixi + item.yuebenjin,
              };
            } else {
              return {
                monthName: item.monthName,
                yuelixi: item.yuelixi,
                yuebenjin: item.yuebenjin,
                leftFund: item.leftFund,
                topNum: item.topNum,
                gjjyuegong: item.yuelixi + item.yuebenjin,
                sdyuegong: 0,
              };
            }
          });
        } else {
          var mergemouthdataArray = gjjObj.map(function (item, index) {
            if (index < sdObj.length) {
              return {
                monthName: item.monthName,
                yuelixi: item.yuelixi + sdObj[index].yuelixi,
                yuebenjin: item.yuebenjin + sdObj[index].yuebenjin,
                leftFund: item.leftFund + sdObj[index].leftFund,
                sdyuegong: sdObj[index].yuelixi + sdObj[index].yuebenjin,
                gjjyuegong: item.yuelixi + item.yuebenjin,
                topNum: item.topNum,
              };
            } else {
              return {
                monthName: item.monthName,
                yuelixi: item.yuelixi,
                yuebenjin: item.yuebenjin,
                leftFund: item.leftFund,
                sdyuegong: 0,
                gjjyuegong: item.yuelixi + item.yuebenjin,
                topNum: item.topNum,
              };
            }
          });
        }
        this.zuheMouthdataArray = mergemouthdataArray;
        this.yuegong =
          this.zuheMouthdataArray[0].sdyuegong +
          this.zuheMouthdataArray[0].gjjyuegong;
        return this.zuheMouthdataArray;
      }
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #ffffff;
}
.fixed {
  position: fixed;
  top: 0px;
  width: 100%;
  left: 0px;
  background-color: #ffffff;
}
.lixi-total {
  width: 34%;
  border-left: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
}
.table-head {
  height: 70rpx;
  width: 100%;
  line-height: 70rpx;
  background-color: #eeeeee;
}
.table-head-content {
  height: 70rpx;
  width: 100%;
  line-height: 70rpx;
  background-color: #ffffff;
  font-size: 12px;
}

.result-header-nav{
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-evenly;
}

.cu-item {
	height: 90rpx;
	line-height: 90rpx;
}

.card-box{
  padding: 0 50rpx;
}

.card-box-1{
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
}

.card-box-1>text {
  color: white;
}

.title-money>text{
  color: white;
}

.card-bottom{
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.card-bottom-item{
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
}
.active-color {
  color: #3745eb;
}

.text-sl {
	font-size: 80rpx;
}
.text-sm {
	font-size: 24rpx;
}
.text-center {
	text-align: center;
}
.text-bold {
	font-weight: bold;
}
.text-box-1{
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-justify-center-align-center{
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-justify-between{
  display: flex;
  justify-content: space-between;
}
.flex-justify-center{
  display: flex;
  justify-content: center;
}
</style>
